<template>
	<view class="page-search">
		<view class="page-search-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="app-header fixed-top">
				<!-- #ifndef MP-WEIXIN -->

				<view class="iconfont iconfanhui" @tap="goBack()"></view>
				<!-- #endif -->
				<view class="search-content">
					<text class="iconfont iconsousuo"></text>
					<input
						class="search-input"
						type="text"
						placeholder="输入商品关键词或商户名"
					/>
				</view>
				<view class="search-button">确定</view>
			</view>
			<view class="module-list">
				<navigator
					class="media"
					v-for="item in productList"
					:key="item.id"
					:url="'./store/index?id=' + item.id"
				>
					<image class="media-object" mode="widthFix"></image>
					<view class="media-content">
						<view class="media-title">{{ item.title }}</view>
						<view class="media-tips">{{ item.tips }}</view>
						<view class="media-store">
							{{ item.storeName }}
							<view class="media-price">￥{{ item.price }}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			productList: [
				{
					id: 1,
					title:
						'日本进口三文鱼日本进口三文鱼日本进口三文鱼日本进口三文鱼日本进口三文鱼日本进口三文鱼',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
				{
					id: 2,
					title: '日本进口三文鱼日本进口三文鱼日本进',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
				{
					id: 3,
					title: '日本进口三文鱼',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
				{
					id: 4,
					title: '日本进口三文鱼',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
				{
					id: 5,
					title: '日本进口三文鱼',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
				{
					id: 6,
					title: '日本进口三文鱼',
					tips: '好吃又新鲜',
					storeName: '微企美食铺',
					price: '200',
				},
			],
		};
	},
	methods: {},
};
</script>

<style lang="scss" scoped>
/*  #ifdef  APP-PLUS  */
@include mobileStatusBar(#fff);
.page-search {
	padding: var(--status-bar-height) 0 0;
}
/*  #endif  */
.page-search-container {
	padding: 104rpx 0 0;
	.app-header {
		background: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		display: flex;
		padding: 20rpx $uni-spacing-base;
		.iconfanhui {
			padding-right: 14rpx;
			line-height: 64rpx;
			font-size: 38rpx;
		}
		.search-content {
			display: flex;
			flex: 1;
			@include borderCreator('', solid, #ddd);
			border-radius: 32rpx;
			align-items: center;
			padding: 2rpx 16rpx;
			margin-right: 16rpx;
		}

		.iconsousuo {
			color: $uni-text-color-grey;
		}

		.search-input {
			font-size: $uni-font-size-sm;
			margin-left: 12rpx;
			flex: 1;
		}

		.search-button {
			padding-left: 8rpx;
			line-height: 64rpx;
			font-size: $uni-font-size-base;
			color: $uni-color-main;
		}
	}

	.module-header {
		background: #f5f5f5;
		padding: 20rpx 24rpx 16rpx;
		font-size: 28rpx;
	}

	.module-list {
		display: flex;
		flex-wrap: wrap;
	}

	.media {
		display: flex;
		width: 100%;
		padding: $uni-spacing-lg $uni-spacing-sm;
		box-sizing: border-box;
		@include borderCreator('bottom', solid, #ddd);
		&:last-child {
			border-bottom: none;
		}
	}

	.media-object {
		background: #eee;
		display: block;
		width: 180rpx;
		height: 180rpx;
	}

	.media-content {
		flex: 1;
		background: #fff;
		padding: 0 $uni-spacing-base;
	}

	.media-title {
		margin: 0 0 16rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color;
		@include textEllipsis(2);
	}
	.media-tips {
		margin: 0 0 10rpx;
	}
	.media-store {
		font-size: $uni-font-size-sm;
		line-height: 30rpx;
		color: $uni-text-color-grey;
	}

	.media-price {
		float: right;
		color: $uni-text-price;
		line-height: 30rpx;
		font-size: $uni-font-size-lg;
	}
}
</style>
